'use client';

import React from 'react';
import { MentionModel, NotificationModel } from '../lib/api';

interface Props {
  notifications: NotificationModel[] | undefined;
  mentions: MentionModel[] | undefined;
  loading: boolean;
}

export function NotificationsPanel({ notifications, mentions, loading }: Props) {
  return (
    <section className="panel">
      <header className="panel-header">
        <div>
          <h2>Inbox</h2>
          <span className="muted">Mentions and derived notifications</span>
        </div>
      </header>
      <div className="panel-body inbox">
        {loading && <p className="muted">Loading inbox…</p>}
        {!loading && (
          <>
            <h3>Notifications</h3>
            <ul className="notification-list">
              {(notifications ?? []).map((item, idx) => (
                <li key={`${item.type}-${idx}`}>
                  <div className="title">{item.type}</div>
                  <div className="body">{item.summary}</div>
                  <div className="meta">{item.actor} · {new Date(item.created_at).toLocaleString()}</div>
                </li>
              ))}
              {(notifications ?? []).length === 0 && <li className="muted">Nothing yet.</li>}
            </ul>
            <h3>Mentions</h3>
            <ul className="notification-list">
              {(mentions ?? []).map((item, idx) => (
                <li key={`${item.id}-${idx}`}>
                  <div className="title">{item.actor}</div>
                  <div className="body">{item.snippet}</div>
                  <div className="meta">{new Date(item.created_at).toLocaleString()}</div>
                </li>
              ))}
              {(mentions ?? []).length === 0 && <li className="muted">No mentions.</li>}
            </ul>
          </>
        )}
      </div>
    </section>
  );
}
